import './index.less';
import moment from 'moment';
import { useMemo } from 'react';
import { TaskT } from '../..';

moment.locale('zh-CN');

interface IProps {
  task: TaskT;
}

const TagList = (props: IProps) => {
  const { task } = props;
  const sysTags = useMemo(() => {
    const tags = [];
    const today = moment(new Date().toISOString().split('T')[0]);
    const endTime = moment(task.endTime.toISOString().split('T')[0]);
    const startTime = moment(task.startTime.toISOString().split('T')[0]);
    if (startTime.isSameOrBefore(today) && endTime.isSameOrAfter(today)) {
      tags.push('近期任务');
    }
    if (startTime.isSame(today) && endTime.isSame(today)) {
      tags.push('今日任务');
    }
    if (endTime.isSame(today)) {
      tags.push('今日截止');
    }
    if (startTime.isAfter(today)) {
      tags.push('待开始');
    }
    if (endTime.isBefore(today)) {
      tags.push('已超时');
    }
    return tags;
  }, [task]);

  return (
    <div className="task-item__tags">
      {sysTags.map((i) => (
        <label key={i} className="tag task-item__tag task-item__tag--active">
          {i}
        </label>
      ))}
      <span className="task-item__tag-divider"></span>
      {task.tags.map((i) => (
        <label key={i} className="tag task-item__tag">
          {i}
        </label>
      ))}
    </div>
  );
};

export default TagList;
